<template>
	<view class="detail_main">
		<!-- 顶部用户信息 -->
		<view v-if="list.uid">
			<view style="display: flex;align-items: center; padding: 20px 0;">
				<!-- 左侧头像部分 -->
				<view style="display: flex;flex: 1;align-items: center;">
					<!-- 头像 -->
					<view>
						<img class="avatar" :src="api.getUserLogo(list.uid)" />
					</view>
					<!-- 用户名和发布时间 -->
					<view style="margin-left: 8px;">
						<view class="nickname">
							<view v-if="!list.user.tbUserInfo.nickname">暂未设置用户名</view>
							<view v-else v-html="list.user.tbUserInfo.nickname">
							</view>
						</view>
						<view class="time" v-html="tools.formatDate(list.lastupdate)"></view>
					</view>
				</view>
				<!-- 右侧关注 -->
				<view style="display: flex;justify-content: flex-end;">
					<view v-if="!list.user.exInfo.mineFollow">
						<view class="button" size="mini" plain="" @click="follow(list)">关注</view>
					</view>
					<view v-else>
						<view class="button" size="mini" plain="" @click="follow(list)">已关注</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 留言板详情数据显示 -->
		<view v-if="list.uid">
			<view class="title" v-html="list.title"></view>
			<view v-html="tools.replaceInfoImg(list.info)"></view>
			<!-- 点赞，举报 -->
			<view class="icon">
				<view class="praise" @click="praise(list)" :class="{active:list.exInfo.praised}">
					<view v-if="!list.exInfo.praised"><uni-icons type="hand-up" size="30"></uni-icons></view>
					<view v-else><uni-icons color="#1890ff" type="hand-up" size="30"></uni-icons></view>
					{{list.praise}}
				</view>
				<view class="praise" :class="{active:list.exInfo.praised}">
					<view><uni-icons type="info" size="30"></uni-icons></view>
				</view>
			</view>
		</view>
		<!-- 留言板评论显示 -->
		<view v-if="list.uid">
			<view class="comment">评论：{{list.reply}}</view>
			<view v-if="page.total<=0">暂无评论</view>
			<view v-else>
				<view v-for="d in list.replies">
					<view class="comment-card">
						<!-- 评论用户信息显示 -->
						<view style="display: flex;">
							<!-- 头像 -->
							<img class="avatar" :src="api.getUserLogo(d.user.tbUser.uid)" />
							<!-- 用户名和回复时间 -->
							<view style="margin-left: 8px;">
								<view class="nickname">
									<view v-if="!d.user.tbUserInfo.nickname">暂未设置用户名</view>
									<view v-html="d.user.tbUserInfo.nickname"></view>
								</view>
								<view class="time" v-html="tools.formatDate(d.lastupdate)"></view>
							</view>
						</view>
						<!-- 评论内容显示 -->
						<view class="comment-info" v-html="d.info"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 留言板回帖 -->
		<view class="reply">
			<input class="reply_input" type="text" adjust-position="true" v-model="addInfo.info" placeholder="请输入内容" />
			<button class="reply_button" size="mini" @click="add">发送</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import api from '../../script/api.js'
	import tools from '../../script/tools.js'

	// 图片内容自适应屏幕
	// const replaceInfoImg = (info) => {
	// 	if (!info) {
	// 		return info;
	// 	}
	// 	// 正则表达式匹配<img开始的所有标签，但不包括>  
	// 	const regex = /<img([^>]*)>/g;
	// 	let style = 'display: block;max-width: 90vw;height: auto;margin: 10px auto;'

	// 	let replacedString = info.replace(regex, function(match, p1) {
	// 		// p1是匹配到的第一个分组，即<img标签的所有属性  
	// 		// 在属性前插入style属性  
	// 		return `<img style="${style}"${p1 ? ' ' + p1 : ''}>`;
	// 	});
	// 	replacedString = replacedString.replace(/\r\n/g, "<br>")
	// 	replacedString = replacedString.replace(/\n/g, "<br>")
	// 	replacedString = replacedString.replace(/\r/g, "<br>")
	// 	return replacedString
	// }

	const mid = ref(-1)
	const list = ref({})
	const page = ref({
		pageSize: 10,
		pageNumber: 1
	})
	const order = ref(1)
	const query = () => {
		api.get(`/message/${mid.value}/${page.value.pageSize}/${page.value.pageNumber}/${order.value}`, {}, (resp) => {
			if (resp.success) {
				list.value = resp.data.data
				page.value = resp.data.pageBean
			}
		})
	}

	// 关注按钮
	const follow = (finfo) => {
		api.post(`/relationship/follow/${finfo.uid}`, {}, (resp) => {
			if (resp.success) {
				uni.showToast({
					title: resp.message,
					icon: 'success',
				})
			} else if (resp.code == 1000) {
				uni.showToast({
					title: "请先登录",
					icon: 'error',
				})
			} else if (resp.code) {
				uni.showToast({
					title: resp.message,
					icon: 'error'
				})
			}
			query()
		})
	}

	// 点赞留言板按钮
	const praise = (pinfo) => {
		api.post(`/message/praise/${pinfo.mid}`, {}, (resp) => {
			if (resp.success) {
				pinfo.exInfo.praised = !pinfo.exInfo.praised
				pinfo.praise = pinfo.exInfo.praised ? pinfo.praise + 1 : pinfo.praise - 1
			} else if (resp.code == 1000) {
				uni.showToast({
					title: "请先登录",
					icon: 'error',
				})
			}
		})
	}

	// 点赞评论按钮
	// const reply_praise = (rinfo) => {
	// 	api.post(`/reply/praise/${rinfo.mrid}`, {}, (resp) => {
	// 		if (resp.success) {
	// 			rinfo.exInfo.praised = !rinfo.exInfo.praised
	// 			rinfo.replies.praise = rinfo.exInfo.praised ? rinfo.replies.praise + 1 : rinfo.replies.praise -
	// 				1
	// 		}
	// 	})
	// }

	const addInfo = ref({
		mid: mid,
		info: ''
	})
	// 发送评论按钮
	const add = () => {
		api.post('/reply', addInfo.value, (resp) => {
			if (resp.success) {
				uni.showToast({
					title: resp.message
				})
				addInfo.value.info = ''
				query()
			} else if (resp.code == 1000) {
				uni.showToast({
					title: '请先登录',
					icon: 'error'
				})
			}
		})
	}

	onLoad((option) => {
		mid.value = option.mid
		console.log('setup this====>', mid.value, option)
		query()
	})
</script>

<style lang="scss" scoped>
	.detail_main {
		padding: 0 20px;
		padding-bottom: 3.5rem;
	}

	// 头像
	.avatar {
		width: 38px;
		height: 38px;
		border-radius: 50%;
	}

	.nickname {
		font-size: 15px;
		font-weight: bold;
	}

	.time {
		font-size: 10px;
	}

	// 关注按钮
	.button {
		color: #1890ff;
		border: solid 1px #1890ff;
		border-radius: 5px;
		padding: 4px 10px;
	}

	// 留言版详情标题
	.title {
		font-size: 20px;
		font-weight: bold;
		padding-bottom: 20px;
	}

	.icon {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4rem;
		margin: 1.5rem 0;
	}

	.praise {
		display: flex;
		align-items: center;
		font-size: 1.5rem;
	}

	.comment {
		font-weight: bold;
		padding: 10px 0;
	}

	.comment-card {
		padding: 10px 0px; // 卡片内边距
		overflow: hidden; // 溢出隐藏

		&:not(:last-child) {
			border-bottom: 0.1px solid #dcdcdc;
		}
	}

	// 评论内容
	.comment-info {
		padding-left: 46px;
	}

	.active {
		color: #1890ff;
	}

	.reply {
		display: flex;
		align-items: center;
		position: fixed;
		padding: 10px 0px;
		bottom: 0; //将元素固定在底部
		left: 0; //确保元素从左侧开始
		width: 100%; //占据整个屏幕宽度
		background-color: #fff;
		border-top: 0.5px solid #dcdcdc;
		z-index: 1000;
	}

	.reply_input {
		flex: 1;
		margin-left: 20px;
		margin-right: 10px;
		background-color: #f0f0f0;
		border-radius: 30px;
		padding: 5px 15px;
	}

	// 发布按钮
	.reply_button {
		margin-right: 20px;
	}
</style>